<script setup>
import { reactive, ref } from 'vue';
//import axios from 'axios';
//import request from '@/request';
import { get, post, put, del } from '@/request';
import { ElMessage } from 'element-plus'


const e_ids = ref([]);//选中的工号
const handleSelectionChange = (currentSelections) => {
  console.log(currentSelections);
  e_ids.value = currentSelections.map(emp => emp.e_id);
  console.log(e_ids.value);
}

//批量删除
const execMultiDel = async () => {
  await del('/emp-multi', e_ids.value);
  getPage();
  ElMessage({
    message: '删除成功！',
    type: 'success',
  })

};

//部门数据
const depList = ref([]);//所有部门
const getDepList = async () => {
  // const response = await axios.get('/api/dep');
  // depList.value = response.data.data;
  const result = await get('/dep');
  depList.value = result.data;
};
getDepList();

//查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  e_id: '',
  e_name: '',
  e_sex: '',
  d_id: '',
  e_birth_start: '',
  e_birth_end: ''
});

//清单
const page = ref({
  total: 0,
  list: []
});
const getPage = async (pageNo = 1) => {
  query.pageNum = pageNo;
  //const response = await axios.get('/api/emp-list', { params: query });
  //page.value = response.data.data;
  const result = await get('/emp-list', query);
  page.value = result.data;
  //用返回的分页参数修正查询条件
  query.pageNum = page.value.current;//当前页码
  query.pageSize = page.value.pageSize;//每页记录数
};
getPage();

//单删除
const delEmp = async (e_id) => {
  await del(`/emp/${e_id}`);
  getPage();
  ElMessage({
    message: '删除成功！',
    type: 'success',
  })

};

//新增
const addVisible = ref(false);//新增弹窗是否可见


const addData = reactive({//新增员工数据
  e_name: '',
  e_sex: '',
  e_birth: '',
  d_id: ''
});

const openAddEmp = () => {

  addVisible.value = true;
};

const execAddEmp = async () => {
  await post('/emp', addData);

  getPage();
  addVisible.value = false;//关闭窗口
  ElMessage({
    message: '新增成功！',
    type: 'success',
  })

};

</script>

<template>


  <el-form :inline="true" :model="query">
    <el-form-item label="工号">
      <el-input v-model="query.e_id" />
    </el-form-item>
    <el-form-item label="姓名">
      <el-input v-model="query.e_name" @input="getPage(1)" />
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="query.e_sex" @change="getPage(1)">
        <el-option label="全部" value="" />
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
    </el-form-item>

    <el-form-item label="部门">
      <el-select v-model="query.d_id" @change="getPage(1)">
        <el-option label="全部" value="" />
        <el-option v-for="dep in depList" :key="dep.d_id" :label="dep.d_name" :value="dep.d_id" />
      </el-select>
    </el-form-item>

    <el-form-item label="出生日期">
      <el-date-picker v-model="query.e_birth_start" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" />
      <span style="margin:0px 10px;"> 至 </span>
      <el-date-picker v-model="query.e_birth_end" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="getPage(1)">查询</el-button>
    </el-form-item>
  </el-form>


  <div style="text-align:left;">
    <el-button type="primary" @click="openAddEmp">新增</el-button>
    <el-button type="danger" @click="execMultiDel">删除</el-button>
  </div>


  <el-table @selection-change="handleSelectionChange" :data="page.list" style="width:800px;">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="e_id" label="工号" />
    <el-table-column prop="e_name" label="姓名" />
    <el-table-column prop="e_sex" label="性别">
      <!-- 插槽 -->
      <template #default="{ row }">
        {{ row.e_sex == 1 ? '男' : (row.e_sex == 2 ? '女' : '') }}
      </template>
    </el-table-column>
    <el-table-column prop="e_birth" label="出生日期" />
    <el-table-column prop="d_name" label="部门" />
    <el-table-column label="操作" width="200">
      <template #default="{ row }">
        <el-button type="danger" @click="delEmp(row.e_id)">删除</el-button>
        <el-button type="primary" @click="openEdit(row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination layout="sizes,prev, pager, next, jumper, ->, total" :page-sizes="[3, 5, 10, 15, 20, 30]"
    :total="page.total" v-model:page-size="query.pageSize" @current-change="getPage" @size-change="getPage(1)" />


  <!-- 新增弹出窗口 -->
  <el-dialog v-model="addVisible" title="新增员工">
    {{ addData }}
    <el-form :model="addData" style="padding-right:100px;">
      <el-form-item label="姓名" :label-width="120">
        <el-input v-model="addData.e_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="120">
        <el-radio-group v-model="addData.e_sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" :label-width="120">
        <el-date-picker v-model="addData.e_birth" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" />
      </el-form-item>

      <el-form-item label="部门" :label-width="120">
        <el-select v-model="addData.d_id">
          <el-option label="请选择" value="" />
          <el-option v-for="dep in depList" :key="dep.d_id" :label="dep.d_name" :value="dep.d_id" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="addVisible = false">取消</el-button>
      <el-button type="primary" @click="execAddEmp">确定</el-button>
    </template>

  </el-dialog>

</template>

<style scoped>
</style>
